<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="f" uri="/WEB-INF/functions.tld" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%--
  Created by IntelliJ IDEA.
  User: Andrey
  Date: 14.08.2014
  Time: 19:08
  To change this template use File | Settings | File Templates.
--%>
<div class="container-fluid">
    <div class="row">
        <div class="page-header">
            <h2>${grantArea.name}
                <c:if test="${not empty sessionUser}">
                    <a class="btn btn-primary"
                       onClick="startMoneyTransfer(${requestedGrant.grantId})">Send
                        Money</a>
                </c:if>
            </h2>
            <small>Sent money: ${moneySum}</small>
            <c:if test="${sessionUser.role.roleName eq 'ROLE_ADMIN'}">
                <small>Avalable money: ${moneyAvalable}</small>
            </c:if>
        </div>
    </div>
    <div class="row">
        <c:forEach items="${grantApplications}" var="grantApplication">
            <div class="col-md-5 well paddinged grant-hovered text-center">
                <c:if test="${sessionUser.role.roleName eq 'ROLE_ADMIN'}">
                    <div class="grant-controls">
                        <!-- <span class="glyphicon glyphicon-pencil"></span> -->
                        <a class="glyphicon glyphicon-pencil"
                           href="<c:url value="/grant/edit/${grantApplication.grantId}" />">
                        </a><!-- <span class="glyphicon glyphicon-remove"></span> -->
                        <a class="glyphicon glyphicon-remove"
                           href="<c:url value="/grant/delete/${grantApplication.grantId}" />"> </a>
                    </div>
                </c:if>
                <a href="<c:url value="/grant/view/${grantApplication.grantId}" /> ">
                    <h3>${grantApplication.grantName}</h3>
                </a>


                <center>
                    <table width="100%">
                        <tr>
                            <td style="text-align: center;"><b>Days to go:</b></td>
                            <td>
                                <div class="big-letters">
                                    <b>${grantApplication.daysToGo}</b>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align: center;"><b>Money needed:</b></td>
                            <td>
                                <div class="big-letters">
                                    <b><fmt:formatNumber type="CURRENCY"
                                                         value="${grantApplication.requestedMoney}"
                                                         groupingUsed="true" currencySymbol="$"/></b>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align: center;"><b>Money recieved:</b></td>
                            <td>
                                <div class="big-letters">
                                    <b><fmt:formatNumber type="CURRENCY"
                                                         value="${grantApplication.moneyAmount}"
                                                         currencySymbol="$"/></b>
                                </div>
                            </td>
                        </tr>
                    </table>
                </center>
				<span class="big-letters">Completed:
					${grantApplication.completedPercent}%</span>

                <div class="progress">
                    <div class="progress-bar progress-bar-success progress-bar-striped"
                         role="progressbar"
                         aria-valuenow="${grantApplication.completedPercent}"
                         aria-valuemin="0" aria-valuemax="100"
                         style="width: ${grantApplication.completedPercent}%">
						<span class="sr-only">${grantApplication.completedPercent}%
							Complete (success)</span>
                    </div>
                </div>
                <div class="bottomed">
                    <c:if test="${not empty sessionUser}">
                        <c:if
                                test="${f:isUserLikeByLogin(grantApplication,sessionUser.userLogin) eq null}">
                            <button type="button" class="btn btn-default like"
                                    id="like${grantApplication.grantId}"
                                    data-loading-text="Loading..."
                                    onclick="like(${grantApplication.grantId}, '../grant/like/')">
                                I want help! <span class="badge pull-rigth"
                                                   id="likeCount${grantApplication.grantId}">${grantApplication.likes.size()}</span>
                            </button>
                        </c:if>
                        <c:if
                                test="${f:isUserLikeByLogin(grantApplication,sessionUser.userLogin) ne null}">
                            <button type="button" class="btn btn-success like"
                                    id="like${grantApplication.grantId}"
                                    data-loading-text="Loading..."
                                    onclick="like(${grantApplication.grantId}, '../grant/like/')">
                                You want help now. <span class="badge pull-rigth"
                                                         id="likeCount${grantApplication.grantId}">${grantApplication.likes.size()}</span>
                            </button>
                        </c:if>
                    </c:if>
                </div>
            </div>
        </c:forEach>
    </div>

    <script>
        function startMoneyTransfer(id) {
            $("#moneyTransferModal").modal();
        }
        function sendMoney() {
            var amount = parseInt($("#moneyAmount").val());
            if (amount > 0) {
                console.log(amount);
                $.ajax({
                    type: "POST",
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader("Accept", "application/json");
                        xhr.setRequestHeader("Content-Type", "application/json");
                    },
                    data: JSON.stringify({
                        grantId: 1
                    }),
                    url: "../money/transfer",
                    success: function () {
                        $("#moneyTransferModal").close();
                    }
                })
            } else {
                alert("0");
            }
        }

    </script>

    <div class="modal fade" id="moneyTransferModal" tabindex="-1"
         role="dialog" aria-labelledby="moneyTransferLabel" aria-hidden="true">


        <div class="modal-dialog">
            <form action="<c:url value="/money/grantArea/${grantArea.link}"/> "
                  id="moneyForm" method='POST' class="form-horizontal">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">
                            <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                        </button>
                        <h4 class="modal-title" id="moneyTranferLabel">Send money to
                            project ${requestedGrantArea.name}</h4>
                    </div>

                    <div class="modal-body">

                        <div class="form-group">
                            <label class="col-sm-4 control-label">The amount of money</label>
                            <!--  <iframe frameborder="0" allowtransparency="true" scrolling="no"
                                  src="https://money.yandex.ru/embed/shop.xml?account=410012443152692&quickpay=shop&payment-type-choice=on&writer=seller&targets=Donation&targets-hint=&default-sum=&button-text=03&fio=on&mail=on"
                                  width="650" height="200"></iframe> -->
                            <div class="col-sm-7 input-group">
                                <span class="input-group-addon">$</span> <input type="number"
                                                                                id="moneyAmount" size="7"
                                                                                name="moneyAmount"
                                                                                value="0" min="0"
                                                                                class="form-control">
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="submit" id="send" value="" class="btn btn-primart"/>
                        Send Money
                        </button>
                        <!-- <button onClick="sendMoney()" class="btn btn-primary" id="sendMoneyButton">Send Money</button> -->
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <div id="result"></div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>